<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row style="display: none;">
        <el-col :span="12">
          <el-form-item label="组织ID" prop="orgId">
            <el-input v-model="form.orgId" placeholder="请输入组织ID" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="启用状态" prop="openStatus">
            <el-radio-group v-model="form.openStatus">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider content-position="left">显示配置</el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="首页轮播图显示" prop="showBanner">
            <el-radio-group v-model="form.showBanner">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="首页公告显示" prop="showNotice">
            <el-radio-group v-model="form.showNotice">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="首页弹窗显示" prop="showPopup">
            <el-radio-group v-model="form.showPopup">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="首页导航按钮显示" prop="showNavButtons">
            <el-radio-group v-model="form.showNavButtons">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="首页新品上市显示" prop="showNewProducts">
            <el-radio-group v-model="form.showNewProducts">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="首页热销商品显示" prop="showHotProducts">
            <el-radio-group v-model="form.showHotProducts">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="首页商品推荐显示" prop="showRecommendProducts">
            <el-radio-group v-model="form.showRecommendProducts">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider content-position="left">颜色主题配置</el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="主题色" prop="themeColor">
            <el-select v-model="form.themeColor" placeholder="请选择主题色">
              <el-option label="蓝色" value="0" />
              <el-option label="绿色" value="1" />
              <el-option label="橙色" value="2" />
              <el-option label="黑色" value="3" />
              <el-option label="紫色" value="4" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" style="display: none;">
          <el-form-item label="辅助色" prop="secondaryColor">
            <el-input v-model="form.secondaryColor" placeholder="请输入辅助色" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="display: none;">
        <el-col :span="12">
          <el-form-item label="背景色" prop="backgroundColor">
            <el-input v-model="form.backgroundColor" placeholder="请输入背景色" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- <el-divider content-position="left">文字配置</el-divider>
      <el-row>
        <el-col :span="24">
          <el-form-item label="我的页面底部广告文字" prop="mineAdText">
            <el-input v-model="form.mineAdText" type="textarea" placeholder="请输入我的页面底部广告文字" />
          </el-form-item>
        </el-col>
      </el-row> -->

      <el-divider content-position="left">联系客服设置</el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="客服电话号码" prop="servicePhone">
            <el-input v-model="form.servicePhone" placeholder="请输入客服电话号码" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客服邮箱" prop="serviceEmail">
            <el-input v-model="form.serviceEmail" placeholder="请输入客服邮箱" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="微信号" prop="serviceWechatId">
            <el-input v-model="form.serviceWechatId" placeholder="请输入微信号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="QQ号" prop="serviceQq">
            <el-input v-model="form.serviceQq" placeholder="请输入QQ号" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="微信二维码" prop="serviceWechatQr">
            <image-upload v-model="form.serviceWechatQr"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="常见问题">
            <div v-for="(item, index) in questionList" :key="index" style="margin-bottom: 10px; border: 1px solid #dcdfe6; padding: 10px; border-radius: 4px;">
              <el-row :gutter="10">
                <el-col :span="11">
                  <el-input v-model="item.question" placeholder="请输入问题" />
                </el-col>
                <el-col :span="11">
                  <el-input v-model="item.answer" placeholder="请输入回答" />
                </el-col>
                <el-col :span="2">
                  <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeQuestion(index)" />
                </el-col>
              </el-row>
            </div>
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="addQuestion">添加问题</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="底部广告文字" prop="mineAdText">
            <el-input v-model="form.mineAdText" type="textarea" placeholder="请输入底部广告文字" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider content-position="left">关于我们设置</el-divider>
      <el-row>
        <el-col :span="24">
          <el-form-item label="店铺LOGO" prop="aboutLogo">
            <image-upload v-model="form.aboutLogo"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="店铺名称" prop="aboutShopName">
            <el-input v-model="form.aboutShopName" placeholder="请输入店铺名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="软件版本" prop="aboutVersion">
            <el-input v-model="form.aboutVersion" placeholder="请输入软件版本" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="我的页面底部备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入我的页面底部备注" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="form-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { getProgramConfig, addProgramConfig, updateProgramConfig } from "@/api/fun/programConfig"
import ImageUpload from "@/components/ImageUpload"

export default {
  name: "ProgramConfigForm",
  dicts: ['sys_yes_no'],
  components: {
    ImageUpload
  },
  data() {
    return {
      // 表单参数
      form: {},
      // 问题列表
      questionList: [{ question: '', answer: '' }],
      // 表单校验
       rules: {
         openStatus: [
           { required: true, message: "启用状态不能为空", trigger: "change" }
         ]
      }
    }
  },
  created() {
    const configId = this.$route.query && this.$route.query.configId
    const pageType = this.$route.query && this.$route.query.pageType

    if (pageType === 'edit' && configId) {
      this.getInfo(configId)
    } else {
      this.reset()
    }
  },
  methods: {
    /** 获取小程序配置详细信息 */
    getInfo(configId) {
      getProgramConfig(configId).then(response => {
        this.form = response.data
        // 解析常见问题JSON
        if (this.form.serviceFaq) {
          try {
            this.questionList = JSON.parse(this.form.serviceFaq)
          } catch (e) {
            this.questionList = [{ question: '', answer: '' }]
          }
        } else {
          this.questionList = [{ question: '', answer: '' }]
        }
      })
    },
    // 表单重置
    reset() {
      this.form = {
        configId: null,
        orgId: null,
        openStatus: 1,
        showBanner: 1,
        showNotice: 1,
        showPopup: 1,
        showNavButtons: 1,
        showNewProducts: 1,
        showHotProducts: 1,
        showRecommendProducts: 1,
        themeColor: "0",
        secondaryColor: "#67C23A",
        backgroundColor: "#F5F7FA",
        mineAdText: null,
        servicePhone: null,
        serviceWechatQr: null,
        serviceEmail: null,
        serviceWechatId: null,
        serviceQq: null,
        serviceFaq: null,
        aboutLogo: null,
        aboutShopName: null,
        aboutVersion: null,
        remark: null
      }
      this.questionList = [{ question: '', answer: '' }]
      this.resetForm("form")
    },
    // 取消按钮
    cancel() {
      this.$tab.closePage()
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 序列化常见问题
          const validQuestions = this.questionList.filter(item => item.question.trim() && item.answer.trim())
          this.form.serviceFaq = JSON.stringify(validQuestions)

          // 自动填充用户所在组织ID
          this.form.orgId = this.$store.state.user.deptId

          if (this.form.configId != null) {
            updateProgramConfig(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              // 通知父页面刷新列表
              this.$eventBus.$emit('refreshProgramConfigList')
              this.$tab.closePage()
            })
          } else {
            addProgramConfig(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              // 通知父页面刷新列表
              this.$eventBus.$emit('refreshProgramConfigList')
              this.$tab.closePage()
            })
          }
        }
      })
    },
    // 添加问题
    addQuestion() {
      this.questionList.push({ question: '', answer: '' })
    },
    // 删除问题
    removeQuestion(index) {
      if (this.questionList.length > 1) {
        this.questionList.splice(index, 1)
      }
    }
  }
}
</script>

<style scoped>
.form-footer {
  text-align: center;
  margin-top: 20px;
}
</style>
